import React, { Component } from 'react'
import cityData from './cityArea.json'
import style from './index.module.css'

// 上方展示框组件
let SureText = props => <div className={style.han_city_select} onClick={props.click}>{props.value}</div>

// 弹层头部组件
let HeaderMsg = props =>(
    <div className={style.city_title}>
        <span className={style.city_cancel} onClick={props.cancel}>取消</span>
        <span>请选择省/市/区</span>
        <span className={style.city_ok}  onClick={props.ok} >确定</span>
    </div>
)

// 默认位置字体组件
let DefaultFont = props => <span className={props.value.length?style.unit_539EB7:null}>{props.value.length?props.value:'请选择'}</span>

//清除按钮
let Clear = props =><span className={style.city_clear} onClick={props.click}>清空</span>

// 省/市/区选择列表
let ProCityAreaList = props =>(
  
    <div className={[style.province_common,style.province_list_province].join(' ')}>
        {
            props.arrOptions.map((item,key)=>(
                <div key={key} 
                    className={[style.province_list_unit,item.name===props.value||item===props.value?style.unit_darkblue:null].join(' ')} 
                    onClick={()=>props.click(item)}>
                    {item.name||item}
                </div>
            ))
        }
    </div>
)

export default class CitySelect extends Component {
    
    state={
        
        cityIsShow:false,
        province:"",
        city:"",
        sureCity:"请选择",
        area:"",
        sureArea:"请选择",
        provinceOptions:cityData,
        cityOptions:[],
        areaOptions:[]
    }

    //弹层显示隐藏
    setCityMessage=()=>{
        const {cityIsShow} = this.state;
        this.setState({cityIsShow:!cityIsShow});  
    }

    //选择区县
    setAreaMessage=()=>{
        const {sureCity} = this.state;
        if(sureCity==="请选择") return alert('请选择城市')
        this.setCityMessage();
    }

    //点击取消
    cancel = ()=> this.setCityMessage()

    //点击确定
    ok  = () =>{
        const {city,area} = this.state;
        this.props.onOk(city,area);
        this.setCityMessage();
        this.setState({sureCity:city===""?"请选择":city,sureArea:area===""?"请选择":area})    
    }

    //点击清空
    clear = () => this.setState({
            province:"",
            city:"",
            area:"",
            cityOptions:[],
            areaOptions:[]
    })

    //重置省份选择值、城市数组及区域数组
    resetCityAreaOptions = (province,cityOptions) => this.setState({province,cityOptions,city:'',areaOptions:[],area:''})

    //重置城市选择值及区域数组
    resetAreaOptions = (city,areaOptions) => this.setState({city,areaOptions,area:''})

    //重置区域选择值
    resetAreaValue = area => this.setState({area})

    //给数组从A-Z排序
    arrSort = arr => arr.sort((a,b)=>a.name?a.name.localeCompare(b.name,"zh"):a.localeCompare(b,"zh"))


    render() {
        const {cityIsShow,provinceOptions,cityOptions,areaOptions,province,city,area,sureCity,sureArea} = this.state;
        return (
            <div className={style.han_city}>
                <div className={this.props.inline?style.han_city_inline:null}>
                    {
                        this.props.inline?<span className={style.han_city_inline_txt}>选择城市</span>:null
                    }
                    <SureText click={this.setCityMessage} value={sureCity}/>
                    <SureText click={this.setAreaMessage} value={sureArea}/>
                </div>
               
                
                {
                    cityIsShow?<div className={style.city_black}>
                        <div className={style.city_white}>
                            {/* 头部 */}
                           <HeaderMsg cancel={this.setCityMessage} ok={this.ok}/>

                            {/* 当前默认位置 */}
                            <div className={style.city_default}>
                                当前定位：
                                <DefaultFont value={province}/>-
                                <DefaultFont value={city}/>-
                                <DefaultFont value={area}/>
                                <Clear click={this.clear}/>
                            </div>

                            {/* 选择省份 */}
                            <div className={style.province_list}>

                                {/* 选择省 */}
                                <ProCityAreaList arrOptions={this.arrSort(provinceOptions)} value={province} click={ item =>this.resetCityAreaOptions(item.name,item.city)}/>
                              
                                {/* 选择市 */}
                                <ProCityAreaList arrOptions={this.arrSort(cityOptions)} value={city} click={ item =>this.resetAreaOptions(item.name,item.area)}/>
                               
                                {/* 选择区 */}
                                <ProCityAreaList arrOptions={this.arrSort(areaOptions)} value={area} click={ item =>this.resetAreaValue(item)}/>
                                
                            </div>
                        </div>
                    </div>:null
                }
            </div>
        )
    }
}
